<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合组件</title>
</head>
<body>


 <div id="app">




 </div>


</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">


    function Title(props) {
        return <h1>列名称:{props.name}</h1>
    }

    function Content(props) {
        return <div>{props.content}</div>
    }


    function Foo(props) {
        return <div>{props.message}</div>
    }


    class App extends  React.Component{

        constructor(props){

            super(props);

            this.state={
                title:'标题1',
                content:'test',
                message:'hello'
            }
        }
        render(){
            return (
                <div>
                    <Title name={this.state.title}/>
                    <Content content={this.state.content}/>
                    <Foo message={this.state.message}/>
                </div>
            )
        }


    }


    ReactDOM.render(<App/>,document.getElementById('app'));

</script>



</html>